<template>
  <!--  v-if="info !== ''" 这里加这个判断 因为 初始的时候 info为空 空的点属性 就undefined  undefined点属性 就报错
 info.author.avatar-->

  <div class="shareInfo" v-if="info !== ''">
    <hm-nav-bar :path="rePath"></hm-nav-bar>
    <div class="content">
      <h3 class="title">
        {{ info.title }}
      </h3>
      <div class="other">
        <img
          v-if="info.author.avatar"
          :src="baseURL + info.author.avatar"
          alt=""
          class="o1"
        />
        <img v-else src="@/assets/logo.png" alt="" class="o1" />
        <div class="o2">
          <div class="o2-top">{{ info.author.nickname }}</div>
          <div class="o2-bottom">{{ info.updated_at | formatTime }}</div>
        </div>
        <i class="o3 iconfont">&#xe644;</i>
        <div class="o4">{{ info.read }}</div>
        <i
          class="o5 iconfont"
          @click="star"
          :class="{
            red: userInfo.starArticles && userInfo.starArticles.includes(+id)
          }"
          >&#xe650;</i
        >
        <div class="o6">{{ info.star }}</div>
      </div>
      <div class="txt" v-html="info.content"></div>
    </div>
    <div class="line"></div>

    <div class="comment">
      <h3 class="comment-title">
        评论<span class="num">{{ commentTotal }}</span>
      </h3>
      <!-- 这里不需要做上面那样 没数据 的话 undefined点属性报错问题 因为 没数据 for循环都不执行
      何来的 里面 item.author.nickname报错呢-->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多啦"
        @load="load"
      >
        <div class="item" v-for="(item, index) in commentList" :key="index">
          <div class="comment-top">
            <img
              :src="baseURL + item.author.avatar"
              alt=""
              class="t1"
              v-if="item.author.avatar"
              @click="sendT(item.id)"
            />
            <img
              src="@/assets/logo.png"
              alt=""
              class="t1"
              v-else
              @click="sendT(item.id)"
            />
            <div class="t2" @click="sendT(item.id)">
              <div class="t2-top">{{ item.author.nickname }}</div>
              <div class="t2-bottom">{{ item.created_at | formatTime }}</div>
            </div>
            <div
              class="t3"
              :class="{
                red:
                  userInfo.starComments &&
                  userInfo.starComments.includes(item.id)
              }"
              @click="commentStar(item)"
            >
              {{ item.star }}
            </div>
            <i
              class="t4 iconfont"
              :class="{
                red:
                  userInfo.starComments &&
                  userInfo.starComments.includes(item.id)
              }"
              @click="commentStar(item)"
              >&#xe650;
            </i>
          </div>
          <h3 class="comment-middle">{{ item.content }}</h3>
          <!-- 加判断 没有回复 就不显示小黑框 -->
          <div class="comment-bottom" v-if="item.children_comments.length > 0">
            <div
              class="commentInfo"
              v-for="(item2, index2) in item.children_comments"
              :key="index2"
            >
              <span class="info-name">{{ item2.author }}:</span>
              <span class="info-txt">{{ item2.content }}</span>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="f1" @click="show">
        <span class="txt">我来补充两句</span>
      </div>
      <div
        @click="collect"
        class="f2"
        :class="{
          red:
            userInfo.collectArticles && userInfo.collectArticles.includes(+id)
        }"
      >
        <i class="iconfont">&#xe649;</i>
        <div>{{ info.collect }}</div>
      </div>
      <div
        class="f3"
        @click="star"
        :class="{
          red: userInfo.starArticles && userInfo.starArticles.includes(+id)
        }"
      >
        <i class="iconfont">&#xe650; </i>
        <div>{{ info.star }}</div>
      </div>
      <div class="f4">
        <i class="iconfont">&#xe63e;</i>
        <div>323</div>
      </div>
    </div>

    <van-popup v-model="isShow" position="bottom" class="popup">
      <div class="comment-txt">
        <van-field
          v-model="inputV"
          type="textarea"
          rows="4"
          class="field"
        ></van-field>
      </div>
      <span class="send" @click="send" :class="{ b: inputV }">发送</span>
    </van-popup>
  </div>
</template>
<script>
import {
  articelsI,
  articlesComments,
  articlesCollect,
  articlesStar,
  articleCommentsStar,
  SendComment
} from '@/api/find.js'
import { mapState } from 'vuex'
export default {
  name: 'shareInfo',
  data () {
    return {
      rePath: this.$route.query.rePath,
      id: this.$route.params.id,
      info: '',
      baseURL: process.env.VUE_APP_URL,
      commentList: [],
      commentTotal: 0,
      loading: false,
      finished: false,
      // 当前页
      currentPage: 0,
      // 每页条数
      pageSize: 2, // 自定义
      isShow: false,
      inputV: '',
      parent: ''
    }
  },
  watch: {
    isShow (newValue) {
      if (!newValue) {
        this.inputV = ''
      }
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  async created () {
    const res = await articelsI(this.id)
    // window.console.log('---------------00000000000')
    // console.log(res)
    this.info = res.data.data
    // window.console.log('-11111111111111111111111111111111')
    // window.console.log(this.info)

    // const res2 = await articlesComments(this.id)
    // window.console.log('---------------00000000000')
    // window.console.log(res2)
    // this.commentList = res2.data.data.list
    // this.commentTotal = res2.data.data.total
  },
  methods: {
    async load () {
      this.currentPage++
      const _q = {
        start: (this.currentPage - 1) * this.pageSize,
        limit: this.pageSize
      }
      const res2 = await articlesComments(this.id, _q)
      this.commentTotal = res2.data.data.total
      // 一项一项的push不能直接push数组 因此需要应扩展运算符 ...
      this.commentList.push(...res2.data.data.list)
      // window.console.log('-11111111111111111111111111111111')
      // window.console.log(this.commentList)
      this.loading = false
      if (this.commentTotal <= this.commentList.length) {
        this.finished = true
      }
    },
    async collect () {
      const res = await articlesCollect({ id: this.id })
      // 1.收藏成功  2.取消收藏
      if (res.data.data.list.includes(+this.id)) {
        this.$toast.success('收藏成功')
      } else {
        this.$toast.success('取消收藏')
      }
      this.info.collect = res.data.data.num
      // 更新用户信息
      this.$store.dispatch('getUserInfo')
      // window.console.log(res)
    },
    async star () {
      const res = await articlesStar({ article: this.id })
      // window.console.log('--------------')
      // window.console.log(res)

      if (res.data.data.list.includes(+this.id)) {
        this.$toast.success('点赞成功')
      } else {
        this.$toast.success('取消点赞')
      }
      this.info.star = res.data.data.num
      // 更新用户信息
      this.$store.dispatch('getUserInfo')
      // window.console.log(res)
    },
    async commentStar (item) {
      const res = await articleCommentsStar({ id: item.id })
      if (res.data.data.list.includes(+item.id)) {
        this.$toast.success('点赞成功')
      } else {
        this.$toast.success('取消点赞')
      }
      item.star = res.data.data.num
      // 更新用户信息
      this.$store.dispatch('getUserInfo')
    },
    // 发送评论
    async send () {
      const res = await SendComment({
        content: this.inputV,
        article: this.id,
        // 回复评论需要用到这个 我这里也传 空的 不会处理的
        parent: this.parent
      })
      // window.console.log('发表评论')
      // window.console.log(res)
      this.isShow = false
      // 这里要做一个判断 因为我们遍历评论是commentList这个数组
      // this.commentList.length等于0 的话 那么表示 还没加载到pingl说明还在页面顶部小于300
      // 如果此时我们添加数据那么commentList unshift进数据了(评论)会渲染页面上  然而当我们往下翻的时候 会加载评论
      // 我们发表的评论会进服务器评论列表 因此我们往下翻的时候 加载评论列表 该评论还又会渲染一次 因此出现发表一次出现两条一样的评论问题
      // 所以要让this.commentList.length !== 0的时候unshift  那样的时候加载了 所以不会有两条一样的现象
      if (this.parent === '') {
        if (this.commentList.length !== 0) {
          this.commentList.unshift(res.data.data)
          res.data.data.star = 0
          this.commentTotal = this.commentList.length
        }
      } else {
        // 回复评论
        const _index = this.commentList.findIndex(item => {
          return item.id === this.parent
        })
        this.commentList[_index].children_comments.push(res.data.data)
      }
    },
    sendT (id) {
      this.parent = id
      this.isShow = true
    },
    show () {
      this.isShow = true
      // 回复评论才有parent  因此点击底部发送评论 的时候应该将parent清掉
      this.parent = ''
    }
  }
}
</script>
<style lang="less" scoped>
.shareInfo {
  padding-bottom: 65px;
  .content {
    padding: 0 @p15;
    .title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 600;
      text-align: left;
      color: #181a39;
      line-height: 25px;
    }
    .other {
      display: flex;
      align-items: center;
      .o1 {
        width: 35px;
        height: 35px;
        border-radius: 50%;
      }
      .o2 {
        flex: 1;

        padding: 15px 10px;
        .o2-top {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          color: #545671;
          line-height: 17px;
          letter-spacing: 0px;
        }
        .o2-bottom {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #b4b4bd;
          line-height: 17px;
          letter-spacing: 0px;
        }
      }
      .o3,
      .o5 {
        color: #b4b4bd;
        margin: 0 5px;
      }
      .o4,
      .o6 {
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #b4b4bd;
        line-height: 17px;
        letter-spacing: 0px;
      }
    }
    .txt {
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #181a39;

      letter-spacing: 0px;
      // 因为 scoped的作用就是 在当前组件 和子组件最外层使用样式  他实现原理就是给标签加data-... 这些类
      // 从而实现独一无二 img父文本 没有这个data--因为样式作用不到 我们可以利用深层访问样式的方法选择器前面加&::v-deep
      &::v-deep img {
        width: 100%;
      }
    }
  }
  .line {
    background-color: #f7f4f5;
    height: 10px;
    margin-top: 20px;
  }

  .comment {
    padding: 20px @p15;
    .comment-title {
      position: relative;
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #222222;
      line-height: 25px;
      letter-spacing: 0px;
      margin-block: 20px;
      .num {
        position: absolute;
        top: -8px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #b4b4bd;
        line-height: 17px;
        letter-spacing: 0px;
      }
    }
    .comment-top {
      display: flex;
      align-items: center;
      padding-top: 15px;
      padding-bottom: 10px;
      .t1 {
        width: 35px;
        height: 35px;
        border-radius: 50%;
      }
      .t2 {
        flex: 1;
        margin-left: 5px;
        .t2-top {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          color: #545671;
          line-height: 17px;
          letter-spacing: 0px;
        }
        .t2-bottom {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #b4b4bd;
          line-height: 17px;
          letter-spacing: 0px;
        }
      }
      .t3 {
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #b4b4bd;
        line-height: 17px;
        letter-spacing: 0px;
      }
      .t4 {
        color: #b4b4bd;
        margin-left: 5px;
      }
    }
    .comment-middle {
      margin-left: 40px;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #181a39;
      line-height: 27px;
      letter-spacing: 0px;
      // 解决英文不换行 到头换行
      word-break: break-all;
      word-wrap: break-word;
    }
    .comment-bottom {
      margin-left: 40px;
      margin-top: 5px;

      .commentInfo {
        background: #f7f4f5;
        border-radius: 4px;
        padding: 3px 10px;

        .info-name {
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          color: #545671;

          letter-spacing: 0px;
        }
        .info-txt {
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 400;
          text-align: left;
          color: #545671;

          letter-spacing: 0px;
          // 解决英文不换行 到头换行
          word-break: break-all;
          word-wrap: break-word;
        }
      }
    }
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 0 @p15;
    height: 60px;
    display: flex;
    align-items: center;
    color: #bcbcc4;
    background-color: #ffffff;
    font-size: 12px;
    width: 100%;
    .f1 {
      flex: 1;
      height: 34px;
      line-height: 34px;
      padding-left: 10px;
      margin-right: 20px;
      background-color: #f7f4f5;
    }
    .f2,
    .f3,
    .f4 {
      margin-left: 15px;
      text-align: center;
      .iconfont {
        font-size: 24px;
      }
    }
  }
  .red {
    color: red !important;
  }
  .popup {
    width: 100%;
    text-align: right;
    color: #d4cecc;
    font-size: 14px;
    padding: 15px;
    .comment-txt {
      width: 100%;

      .field {
        width: 100%;
        background-color: #f7f4f5;
      }
    }
    .send {
      margin-top: 2px;
    }
    .b {
      color: black;
    }
  }
}
</style>
